<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        [id$=result] span{
            color:red;
            font-size: 15px;
            font-weight:bold;
            padding: 5px;
            margin:  5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        /*全局数据*/
        var data_json={};
        /*抽奖奖项*/
        var AWARDS={
            FIRST:{
                label:"一等奖",
                key:"FIRST"
            },SECOND:{
                label:"二等奖",
                key:"SECOND"
            },THIRD:{
                label:"三等奖",
                key:"THIRD"
            },SUNSHINE:{
                label:"阳光奖",
                key:"SUNSHINE"
            },OLD:{
                label:"老员工奖",
                key:"OLD"
            }
        };
        /* 当前抽奖状态->AWARDS.FIRST */
        var current_awards;
        var immer;
        /**
         * 根据奖项获取抽奖scrope
         * params AWARDS.FIRST.key
         * return []
         */
        function getscope(awards_key){
            return {
                FIRST:[].concat(data_json.all),
                SECOND:[].concat(data_json.all),
                THIRD:[].concat(data_json.all,data_json.guest),
                SUNSHINE:[].concat(data_json.all,data_json.guest),
                OLD:[].concat(data_json.old),
            }[awards_key];
        }
        /**
         * 初始化外部数据:
         * 详见data.json
         */
        function initData(){
            $.getJSON("data.json",function(data){
                data_json=data;
                show(data_json,getexclude());
            })
        }
        function citem(item,excludes){
            var context=[];
            //换行元素个数
            var br=3;
            context.push('<div class="row">');
            for(var i=0;i<item.length;i++){
                if(excludes[item[i].id]===1){
                    context.push('<div class="col-md-2 bg-info">'+item[i].name+'</div>');
                }else{
                    context.push('<div class="col-md-2">'+item[i].name+'</div>');
                }
            }
            context.push('</div>');
            return context.join(" ");
        }
        function show(data,drawed){
            $("#memberall").append(citem(data.all,drawed));
            $("#memberguest").append(citem(data.guest,drawed));
            $("#memberold").append(citem(data.old,drawed));
        }
        /**
         * 获取cookie中已抽过的对象
         * {"01":1,"12":1}
         * return obj
         */
        function getexclude(){
            var obj={length:0};
            var ss=[];
            if($.cookie("drawed")){
                ss=$.cookie("drawed").split(",");
            }else{
                return obj;
            }
            $.each(ss,function(i,v){
                obj[v]=1;
                obj["length"]=i+1;
            });
            return obj;
        }
        function tomap(arrays){
            var obj={length:0};
            $.each(arrays,function(i,v){
                obj[v.id]=v.name;
                obj["length"]=i+1;
            });
            return obj;
        }

        function setexclude(val){
            var ss=[];
            var cookie=$.cookie("drawed");
            if(cookie){
                ss=cookie.split(",");
                if($.inArray(val,ss)<0){
                    $.cookie("drawed",cookie+","+val);
//                    console.log("cookies:",cookie,"write new",val)
                }
            }else{
                $.cookie("drawed",val);
            }

        }

        /**
         * 抽奖逻辑
         * 1.
         * @param awards 奖项
         * @param scope 域
         * @param exclude 排除
         */
        function startdraw(){
            //刷屏姓名
            var scope=tomap([].concat(data_json.all,data_json.guest,data_json.old));
            if(immer) {
                clearInterval(immer);
            }
            immer = setInterval(function () {
                num = getrandom();
                console.log("num:" + num);
                $('#result').html(scope[num]);
            }, 50)

        }

        function stopdraw(){
            if(immer) {
                /*定时器清理*/
                clearInterval(immer);
                immer="";
                /*显示逻辑*/
                var scope = tomap(getscope(current_awards.key));
                var exclude = getexclude();
                while (true) {
                    num = getrandom();
                    console.log("exclude[num]:"+exclude[num]+"scope[num]:"+scope[num]);
                    console.log(exclude["length"]+"======="+scope["length"]);
                    if(exclude&&scope&&exclude["length"]===scope["length"]){
                        break;
                    }
                    if(!exclude[num]){
                        break;
                    }
                }
//                var cnum=setInterval(function () {
//                    num = getrandom();
//                    console.log("exclude[num]:",exclude[num]);
//                    console.log("scope[num]:",scope[num]);
//                    if(!exclude[num]&&scope[num]){
//                        clearInterval(cnum);
//                    }
//                }, 50);
                function doSomething(){
                    var val=scope[num];
                    var key=current_awards.key.toLowerCase();
                    $('#result').empty().html(val);
                    var msg = num + ":" + val;
                    $('#'+key+"_result").append('<div class="col-md-2" style="font-color:red">'+msg+'</div>');
                    setexclude(num);
                };
                doSomething();
            }
        }
        /**
         * 生成范围0-100随机数
         * @returns {number}
         */
        function getrandom(){
            var num = Math.random();//Math.random()：得到一个0到1之间的随机数
            num = Math.ceil(num * 10);
            if(num<10){
                return "0"+num;
            }
            return ""+num;
        }

        /*=======  页面初始化逻辑  =======*/
        $(document).ready(function(){
//            $.cookie("drawed","05,03,01");
            initData();
        });

    </script>
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div class="col-md-12 bg-danger text-center" style="height: 60px;padding-top: 10px; font-size: 30px;"><b>2016年 精迪敏年会抽奖</b></div>
    </div>
    <div class="row well text-center">
        <!-- Standard button -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="current_awards=AWARDS.FIRST">一等奖</button>

        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="current_awards=AWARDS.SECOND">二等奖</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="current_awards=AWARDS.THIRD">三等奖</button>

        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="current_awards=AWARDS.SUNSHINE">阳光奖</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="current_awards=AWARDS.OLD">老员工奖</button>

    </div>
    <div class="alert bg-success">
        <div class="row" id="first_result">
            <span>一等奖:</span>
        </div>
        <div class="row" id="second_result">
            <span>二等奖:</span>
        </div>
        <div class="row" id="third_result">
            <span>三等奖:</span>
        </div>
        <div class="row" id="sunshine_result">
            <span>阳光奖:</span>
        </div>
        <div class="row" id="old_result">
            <span>老员工奖:</span>
        </div>
    </div>
    <div id="alllist" class="well">
        <h4>员工名单</h4>
        <div id="memberall"></div>
        <hr/>
        <h4>来宾名单</h4>
        <div id="memberguest"></div>
        <hr/>
        <h4>老员工</h4>
        <div id="memberold"></div>
    </div>

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">抽奖</h4>
                </div>
                <div class="modal-body">
                    <div class="row" style="padding-left: 23%;">
                        <div class="col-md-12  text-center">
                          <div class="bg-primary" style="width:500px;height:200px;">
                              <span id="result" style="font-size: 100px;"></span>
                          </div>
                        </div>
                    </div>
                    <div class="row" style="padding-top: 10%;">
                        <div class="col-md-12  text-center">
                            <button type="button" class="btn btn-primary btn-lg" onclick="startdraw();">抽奖</button>
                            <button type="button" class="btn btn-primary btn-lg" onclick="stopdraw();">停止</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--<h1>获奖名单</h1>-->
    <!--<hr/>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12"></div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12"></div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12"></div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12"></div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12"></div>-->
    <!--</div>-->
</body>
</html>